<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>steps</title>
    <!-- 组件样式（全部的） -->
    <link rel="stylesheet" href="../../dist/tdesign.css">
    <!--
      TDesign 图标库，桌面端与移动端用同样的资源
      使用方式：<i class="t-icon t-icon-delete"></i>
    -->
    <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">

</head>
<body>
  <div class="tdesign-demo-wrap">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Steps</h1>
      <p class="tdesign-demo-wrap__info">开发者：JrainLau</p>
      <p class="tdesign-demo-wrap__info">创建日期：2020-06-05</p>
      <p class="tdesign-demo-wrap__info">说明：TDesign steps 组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 默认样式 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">默认</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body tdesign-demo-steps">
        <h4>1.水平步骤条带序号</h4>
        <!-- 内容区 Start-->
        <div class="t-steps t-steps--horizontal t-steps--default-anchor">
          <div class="t-steps-item t-steps-item--finish">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <i class="t-icon t-icon-circle-success"></i>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">已完成的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--process">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">2</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">进行中的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">3</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">4</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-steps">
        <h4>2.水平步骤条不带序号</h4>
        <!-- 内容区 Start-->
        <div class="t-steps t-steps--horizontal t-steps--dot-anchor">
          <div class="t-steps-item t-steps-item--finish">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">已完成</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--process">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">进行中</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-steps">
        <h4>3.垂直步骤条带序号</h4>
        <!-- 内容区 Start-->
        <div class="t-steps t-steps--vertical t-steps--default-anchor t-steps--positive">
          <div class="t-steps-item t-steps-item--finish">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <i class="t-icon t-icon-success_fill"></i>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">已完成的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--process">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">2</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">进行中的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">3</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">4</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-steps">
        <h4>4.垂直步骤条不带序号</h4>
        <!-- 内容区 Start-->
        <div class="t-steps t-steps--vertical t-steps--dot-anchor t-steps--positive">
          <div class="t-steps-item t-steps-item--finish">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">已完成</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--process">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">进行中</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-steps">
        <h4>5.带 Icon 步骤条</h4>
        <!-- 内容区 Start-->
        <div class="t-steps t-steps--horizontal t-steps--default-anchor">
          <div class="t-steps-item t-steps-item--finish">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <i class="t-icon t-icon-success_fill"></i>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">已完成的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--process">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <i class="t-icon t-icon-success_fill"></i>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">进行中的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <i class="t-icon t-icon-success_fill"></i>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <i class="t-icon t-icon-success_fill"></i>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-steps">
        <h4>6.带额外内容步骤条</h4>
        <!-- 内容区 Start-->
        <div class="t-steps t-steps--vertical t-steps--dot-anchor t-steps--positive">
          <div class="t-steps-item t-steps-item--finish">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">已完成</div>
                <div class="t-steps-item-description">这里是提示文字</div>

                <div class="t-steps-item-extra">
                  <button class="t-button t-button--primary t-size-s">按钮</button>
                  <button class="t-button t-button--line t-size-s">按钮</button>
                </div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--process">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">进行中</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>

      <div class="tdesign-demo-item__body tdesign-demo-steps">
        <h4>7.倒序步骤条（仅限垂直步骤条）</h4>
        <!-- 内容区 Start-->
        <div class="t-steps t-steps--vertical t-steps--dot-anchor t-steps--reverse">
          <div class="t-steps-item t-steps-item--finish">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">已完成</div>
                <div class="t-steps-item-description">这里是提示文字</div>

                <div class="t-steps-item-extra">
                  <button class="t-button t-button--primary t-size-s">按钮</button>
                  <button class="t-button t-button--line t-size-s">按钮</button>
                </div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--process">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">进行中</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon"></div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
        </div>

        <div class="t-steps t-steps--vertical t-steps--default-anchor t-steps--reverse">
          <div class="t-steps-item t-steps-item--finish">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <i class="t-icon t-icon-success_fill"></i>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">已完成的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--process">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">2</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">进行中的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">3</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">4</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 组件状态 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">状态</h2>
      <div class="tdesign-demo-item__body tdesign-demo-steps">
        <h4>1.水平步骤条带序号</h4>
        <!-- 内容区 Start-->
        <div class="t-steps t-steps--horizontal t-steps--default-anchor">
          <div class="t-steps-item t-steps-item--finish">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <i class="t-icon t-icon-success_fill"></i>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">已完成的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--process">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">2</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">进行中的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--error">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <i class="t-icon t-icon-clear-circle"></i>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">错误的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
          <div class="t-steps-item t-steps-item--wait">
            <div class="t-steps-item__inner">
              <div class="t-steps-item-icon">
                <span class="t-steps-item-icon__number">4</span>
              </div>
              <div class="t-steps-item-content">
                <div class="t-steps-item-title">未进行的步骤</div>
                <div class="t-steps-item-description">这里是提示文字</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>
    </div>

</body>
</html>
